<template>
  <div class="container">
    <router-view></router-view>
    <div class="index">
      <Header />
      <div class="main-center">
        <div class="main-left ">
          <div class="conn">
            <ul class="nav-menu">
              <li class="cur" @click="goProfile()">
                资料设置
                <i></i>
              </li>
              <li @click="goSetting()">
                账号设置
                <i></i>
              </li>
            </ul>
            <div class="clear"></div>
            <ul class="form-area">
              <li>
                <span class="tit">头像</span>
                <div class="r-text">
                  <el-upload class="avatar-uploader" :action="uploadUrl" :show-file-list="false"
                    :on-success="handleUpSuccess" :auto-upload="true">
                    <img v-if="this.form.avatar" :src="this.form.avatar" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </div>
              </li>
              <li>
                <span class="tit">账号</span>
                <div class="r-text">{{ this.form.mobile || this.form.nickname}}</div>
              </li>
              <li>
                <span class="tit">姓名</span>
                <div class="r-text">
                  <el-input v-model="form.nickname" placeholder="输入您的姓名"></el-input>
                </div>
              </li>
              <li>
                <span class="tit">性别</span>
                <div class="r-text">
                  <el-radio-group v-model="form.gender">
                    <el-radio label=1>男</el-radio>
                    <el-radio label=0>女</el-radio>
                  </el-radio-group>
                </div>
              </li>
              <li>
                <span class="tit">手机号</span>
                <div class="r-text">{{ this.form.mobile }}</div>
              </li>
              <li>
                <span class="tit">任职科目</span>
                <div class="r-text">
                  <el-select style="width: 100%;" v-model="value1" placeholder="请选择" @change="change()" multiple>
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </li>
              <li>
                <span class="tit">授课班级</span>
                <div class="r-text">
                  <el-cascader style="width: 260px;" v-model="value" :options="classOption" :show-all-levels="false"
                    :props="{ expandTrigger: 'hover', multiple: 'true' }"></el-cascader>
                </div>
              </li>
              <li>
                <span class="tit">所属学校</span>
                <div class="r-text">{{ this.form.school_name }}</div>
              </li>
            </ul>

            <div class="mt30">
              <el-button @click="confirm()">保存</el-button>
            </div>
          </div>
        </div>
        <div class="main-right ">
          <div class="con-menu2" @click="goBack()">
            <div class="menu-img"><img src="static/img/r-back.png" alt="" /></div>
            <div class="menu-item">返回</div>
          </div>
          <div class="con-menu2" @click="goHome()">
            <div class="menu-img"><img src="static/img/r-home.png" alt="" /></div>
            <div class="menu-item">首页</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Header from '../../components/header.vue';
  export default {
    data() {
      return {
        value1: [],
        subject_id: '',
        uploadUrl: this.$brid + '/api/common/oss_upload',
        squareUrl: '/static/img/default-avatar.png',
        token: localStorage.getItem('token'),
        options: [],
        form: {
          avatar: '',
          username: '',
          nickname: '',
          gender: '',
          mobile: '',
          subject_id: '',
          grades_ids: '',
          class_ids: '',
          school_name: ''
        },
        props: {
          multiple: true
        },
        value: [],
        classOption: []
      };
    },
    created() {
      this.setVal();
      this.getClass();
    },

    methods: {
      clear() {
        //console.log(111);
        //this.form.subject=[]
      },
      change(e) {
        //console.log('aaa');
        //console.log(this.value1);
      },
      //获取科目列表以及授课班级
      getClass() {
        //console.log("get、")
        //获取科目列表
        this.$api('user.subject', {
          token: this.token
        }).then(res => {
          res.data.forEach((item, index) => {
            var data = {};
            data.label = item.name;
            data.value = item.id;
            this.options.push(data);
          });
        });
        //获取授课班级
        this.$api('user.grades', {
          token: this.token
        }).then(res => {
          //console.log(res);
          res.data.forEach((item, index) => {
            var data = {};
            data.value = item.id;
            data.label = item.name;
            data.children = [];
            this.classOption.push(data);
            item.list.forEach((items, indexs) => {
              var child = {};
              child.value = items.id;
              child.label = items.name;
              child.children = [];
              data.children.push(child);
              items.list.forEach((itemes, indexes) => {
                var childs = {};
                childs.value = itemes.id;
                childs.label = itemes.use_name;
                child.children.push(childs);
              });
            });
            // this.classOption.push(data);
          });
          //console.log(this.classOption);
        });
      },
      confirm() {
        var grades = [];
        this.value.forEach((item, index) => {
          //console.log(item);
          grades.push(item[2]);
        });
        //console.log(this.value1)
        this.form.subject_id = this.value1.toString();
        this.form.grades_ids = grades.toString();
        this.form.class_ids = JSON.stringify(this.value);
        //console.log(this.form);
        this.$api('user.edituser', this.form).then(res => {
          if (res.code == 1) {
            this.$api('user.getuser', {
              token: this.token
            }).then(res => {
              localStorage.setItem('userInfo', JSON.stringify(res.data));
              this.$message.success('保存成功');
              this.setVal();
            });
          } else if (res.code == 0) {
            this.$message({
              message: res.msg,
              type: 'warning'
            });
            this.setVal();
          }
        });
      },
      setVal() {
        this.value1 = [];
        let userInfo = JSON.parse(localStorage.getItem('userInfo'));
        //console.log(userInfo);
        this.form.id = userInfo.user_id || userInfo.id;
        this.form.avatar = userInfo.avatar;
        this.form.mobile = userInfo.mobile;
        this.form.gender = userInfo.gender.toString();
        this.form.nickname = userInfo.nickname;
        if (userInfo.subject_id != '') {
          this.value1 = userInfo.subject_id.split(',').map(Number);
        } else {
          this.value1 = ''
        }
        if (userInfo.class_ids != '')
          this.value = JSON.parse(userInfo.class_ids);
        this.form.school_name = userInfo.school_name;
        ////console.log(this.form);
      },

      handleUpSuccess(res, file) {
        this.form.avatar = res.data.cdnUrl;
      },
      goBack() {
        this.$router.go(-1);
      },
      goHome() {
        this.$router.push(localStorage.getItem('jump_path'));
        // this.$router.push('/index');
      },
      goProfile() {
        this.$router.replace('/profile');
      },
      goSetting() {
        this.$router.replace('/setting');
      }
    },
    components: {
      Header
    }
  };

</script>

<style lang="scss" scoped>
  .avatar-uploader {
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: 50%;
    background: #d7d7d7;
  }

  .avatar-uploader img {
    width: 48px;
  }

</style>
